<%--
  Created by IntelliJ IDEA.
  User: fight
  Date: 2019/9/20
  Time: 8:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>棋盘设计</title>
    <meta name="viewport" content="width=device-width"/>
    <script type="text/javascript">
        
        basePath = "http://${ip}";
    </script>

    <style>
        .header{
            padding: 5px 90px;
        }
        .rooms{
        }
        .hide{
            display: none;
        }

    </style>
</head>

<body>
${user.username}

<div class="header">
    <a href="javascript:void(0);" name="home" id="btn-createRoom" class="${!nav.equals('home')?'hide':''}"><span onclick="createRoom()">创建房间</span></a>
    <a href="javascript:void(0);" class="hide" id="btn-outRoom"><span onclick="outRoom()">退出房间</span></a>
    <a href="${ctx}/clear"  id="btn-restart">重启服务器</a>
    <a href="${ctx}/logout" id="btn-logout">退出登录</a>
</div>

<div class="rooms" id="rooms">
</div>


<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/index.js"></script>
<script type="text/javascript">
    $(function () {
        var userId = '${user.id}';
        console.log(userId)
        // initUI
        $('#rooms').load('${ctx}/roomList');
        <%--var wsUrl = basePath+`${ctx}/chessWebSocket/`+userId;--%>
        var wsUrl = 'http://47.94.157.43'+`${ctx}/chessWebSocket/`+userId;

        var userId = $('#userId').val();
        // 检查连接是否存在
        socket = new WebSocket(wsUrl.replace('http','ws'));
        socket.onopen = function() {
            console.log("Socket 已打开");
            //socket.send("这是来自客户端的消息" + location.href + new Date());
        };

        socket.onmessage = function(ev){
            console.log(ev);
            var data = ev.data.split(',');

            if(data=='restart'){  // 重启服务器
                window.location.href = "${ctx}/logout";
            }
            if(ev.data=='reloadRoom'){
                $('#rooms').load('${ctx}/roomList');
            }
            if(data.length>1&&data[0] == 'join'){  // 有人加入
                $('#anotherUser').text(data[1]);
                Chess.data.role = "me";
            }
            if(data=='outRoom'){
                $('#rooms').load('${ctx}/roomList')
            }
            if(data.length>3&&data[0]=='step'){
                var i = data[1], j=data[2];
                Chess.methods.stepAnother(i, j);
                if(data[3]!=-1){  // 胜负已出
                    console.log('胜负已出')
                    alert(data[3]);
                    // 退出房间
                    $('#rooms').load('${ctx}/outRoom')
                }
            }
        }

        //关闭事件
        socket.onclose = function() {
            console.log("Socket已关闭");
        };
    });
    function createRoom() {
        $('#rooms').load('${ctx}/createRoom');
    }
    function outRoom() {
        $('#rooms').load('${ctx}/outRoom')
    }
</script>
</body>
</html>
